import { Card, Descriptions, Divider, Icon } from 'antd';
import React, { useState, useEffect } from 'react';
import { stringToDate } from "@/generic/Utils";

const DescripItem = Descriptions.Item

const ObjectInfo = props => {

    const { dispatch, currentPage, objInfo } = props;
    const { detailTitle, leave, content: contentItems, footer: footerArr, } = props.detailArgs;
    const [content, setContent] = useState("");
    const [footer, setFooter] = useState('');
    const MARK = 'detail';

    const renderContent = () => {

        const descripItems = [];

        const renderText = (text, isDate) => {

            if (typeof (text) == 'boolean') {
                return text
                    ? <Icon type="check-square" style={{ color: '#52c41a' }} />
                    : <Icon type="close-square" style={{ color: 'gray' }} />
            }
            else if (isDate) {
                return stringToDate(text);
            }
            return text;
        }

        if (contentItems && currentPage) {
            for (const key in contentItems) {

                const descList = [];
                contentItems[key].length > 0
                    && contentItems[key].forEach((item, i) => {
                        const textHtml = renderText(objInfo[item.index], item.isDate);
                        textHtml
                            && descList.push(<DescripItem key={i} label={item.label}>{textHtml}</DescripItem>);
                    })

                descripItems.push(
                    <span key={key}>
                        <Descriptions>{descList}</Descriptions>
                        <Divider />
                    </span>
                )
            }
        }

        return descripItems
    }

    const renderFooter = () => {
        const footerOpts = [];

        if (footerArr) {
            footerArr.forEach((item, i) => {
                (!item.mark || item.mark == MARK)
                    && footerOpts.push(
                        <div key={i} style={{ ...item.style }}>
                            <item.elem {...item.args}
                                onClick={() => {
                                    item.onClick &&
                                        item.onClick(dispatch, objInfo)
                                }}
                            >{item.text}</item.elem>
                        </div>
                    )
            })
        }
        return <>{footerOpts}</>;
    }

    useEffect(() => {
        return () => {
            // leave && dispatch({ ...leave })
        }
    }, [])

    useEffect(() => {
        // console.log("==>> contentItems!", contentItems)
        setContent(renderContent());
        setFooter(renderFooter());
    }, [contentItems])

    return (
        <div style={{ backgroundColor: "#fff" }}>
            <Card
                title={detailTitle}
            // extra={extraRender()}
            >
                {content}
                {footer}
            </Card>
        </div>
    );
}

export default ObjectInfo;